<template>
  <u-popup
    :show="show"
    mode="center"
    round="12"
    :closeable="false"
    @close="close"
    :safeAreaInsetBottom="false"
  >
    <view class="password-tip-popup">
      <view class="popup-header">
        <text class="popup-title">提示</text>
      </view>

      <view class="popup-content">
        <text class="tip-text">您当前未设置登录密码，请前往设置</text>
      </view>

      <view class="popup-footer">
        <button class="btn btn-primary" @click="goToSetting">去设置</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "PasswordTipPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 不需要额外的数据
    };
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit("close");
    },

    // 去设置密码
    goToSetting() {
      this.$emit("goToSetting");
      this.close();
      // set/password
      uni.navigateTo({
        url: "/views/set/password",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.password-tip-popup {
  width: 560rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 40rpx 0 0 0;
  text-align: center;
}

.popup-title {
font-size: 36rpx;
color: #333333;
  font-weight: 600;
}

.popup-content {
  padding: 60rpx 0  80rpx 0;
  text-align: center;

}

.tip-text {
  font-size: 28rpx;
color: #333333;
  line-height: 1.6;
  text-align: center;

}

.popup-footer {
  padding: 0 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  border: none;
  border-radius: 8rpx;
  padding: 24rpx;
  font-size: 30rpx;
  font-weight: 500;
  transition: all 0.3s ease;

  &::after {
    border: none;
  }

  &:active {
    transform: scale(0.98);
  }
}

.btn-primary {
  border: none;
  font-size: 36rpx;
  color: #ffffff;
  width: 480rpx;
  height: 76rpx;
  line-height: 76rpx;
  padding: 0;
  background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
  border-radius: 60rpx 60rpx 60rpx 60rpx;
  &:active {
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  }
}


</style>
